<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框案例</title>
		<style>
			/*练习 1 圆形 2.正三角形
			 思路1:宽高与边框倒角一致
			*/
		   div#cirle{
		   width:400px; 
		   height:400px;
		   border: 1px solid red; 
		   border-radius: 50%;
		   /*边框阴影 box- shdow 属性*/
		   box-shadow: 5px 5px 5px 50px red inset;
		 }
		   /*思路二:div#triangle	css中 抓到div	
		   左边框	50像素实线红色	
		   哟边框	50像素实线黄色	
		   下边框:	50像素实线黑色	
		   注意:先别加宽高	transparent	透明色*/	
			div#triangle{
				width:0;
				/*border-left: 50px solid transparent;
				border-right:50px solid transparent;
				border-bottom: 50px solid black;*/
				/*两行 0:倒三角，蓝色，透明度.3	
				提醒:所有边框:50px solid transparent	
				上边框颜色改成蓝色0,0,255	
				*/
			   border : 50px solid transparent;
			   border-top-color: rgba(0,0,255,.3);
			}
			/*outline 边框轮廓 只针对input 元素*/
			input{
				outline:1px solid red;
				
			}
			/*实际应用:通配选择器 去掉轮廓
			*{}
			*/
		</style>
	</head>
	<body>
		<div id="cirle"></div>
		<<div id="triangle"></div>
	</body>
</html>